<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>弹幕引擎Demo</title>
    <script src="../dist/bulletScreenEngine.all.min.js"></script>
    <script>
        window.onload = function () {
            bulletScreenEngine = new BulletScreenEngine(document.getElementById('BulletScreensDiv'), {}, 'canvas');
            var versionInfo = bulletScreenEngine.getVersion();
            document.getElementById("version").innerText = versionInfo.version;
            document.getElementById("buildDate").innerText = versionInfo.buildDate;
            loadData(bulletScreenEngine);
            setInterval(showDebugInfo, 500);
        }
        var loadData = function (bulletScreenEngine) {
            var _startTime = 5000;
            for (var i = 0; i < 10000; i++) {
                if (Math.random() > 0.6)
                    bulletScreenEngine.addBulletScreen({
                        text: "这是一个长长长长长长长长长长长长长长长长长长长长长长长长的测试(^_^)",
                        speed: 0.15 + Math.random() / 90,
                        size: 19,
                        color: 'white',
                        borderCorol: 'black',
                        type: 0,
                        startTime: _startTime
                    });
                else
                    bulletScreenEngine.addBulletScreen({
                        text: "橘里橘气",
                        speed: 0.1 + Math.random() / 90,
                        size: 20,
                        color: '#FFCC66',
                        borderCorol: '#FF9933',
                        type: (Math.random() > 0.4) ? 0 : 2,
                        startTime: _startTime
                    });
                _startTime += parseInt(Math.random() * 300);
            }
        }
        var showDebugInfo = function () {
            var debugInfo = bulletScreenEngine.getDebugInfo();
            document.getElementById("time").innerText = debugInfo.time.toString();
            document.getElementById("delay").innerText = debugInfo.delay.toString();
            document.getElementById("fps").innerText = debugInfo.fps.toString();
            document.getElementById("BulletScreensOnScreenCount").innerText = debugInfo.bulletScreensOnScreenCount.toString();
            document.getElementById("BulletScreensCount").innerText = debugInfo.bulletScreensCount.toString();
            document.getElementById("delayBulletScreensCount").innerText = debugInfo.delayBulletScreensCount.toString();
        }
        function sendBulletScreen() {
            var bulletScreenText = document.getElementById("BulletScreenText").value;
            document.getElementById("BulletScreenText").value = '';
            bulletScreenEngine.addBulletScreen({
                text: bulletScreenText,
                speed: 0.18,
                size: 25,
                color: 'white',
                borderCorol: 'black',
                boxColor: 'white',
                canDiscard: false
            });
        }
    </script>
</head>

<body>
    <p style="font-size: 70%">引擎版本：<b id="version"></b>&nbsp;构建时间：<b id="buildDate"></b></p>
    <div style="width:720px;height:405px;">
        <div style="width:100%;height:100%;background:url(background.jpg);background-size: 100%;"></div>
        <div id="BulletScreensDiv" style="width:720px;height:405px;position:relative;left:0;top:-405px;z-index:1000;"></div>
    </div>
    <p><input type="text" style="width:500px;" id="BulletScreenText">&nbsp;<a href="#" onclick="sendBulletScreen();">发送</a></p>
    <p>时间：<b id="time"></b> fps：<b id="fps"></b></p>
    <p>实时弹幕条数：<b id="BulletScreensOnScreenCount"></b>&nbsp;剩余弹幕条数：<b id="BulletScreensCount"></b></p>
    <p>延迟：<b id="delay"></b>ms 延迟丢弃丢弃弹幕数：<b id="delayBulletScreensCount"></b></p>
    <a href="#" onclick="bulletScreenEngine.play();">开始</a>&nbsp;<a href="#" onclick="bulletScreenEngine.pause();">暂停</a>&nbsp;<a href="#" onclick="bulletScreenEngine.stop();">停止</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.show();">显示弹幕</a>&nbsp;<a href="#" onclick="bulletScreenEngine.hide();">隐藏弹幕</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.cleanBulletScreenList();loadData(bulletScreenEngine);">重新加载弹幕</a>&nbsp;<a href="#" onclick="bulletScreenEngine.cleanBulletScreenListOnScreen();">清空屏幕弹幕</a>&nbsp;<br>
    <a href="#" onclick="bulletScreenEngine.option.playSpeed = 1;">1倍速</a>&nbsp;<a href="#" onclick="bulletScreenEngine.option.playSpeed = 1.5;">1.5倍数</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.option.playSpeed = 2;">2倍速</a>&nbsp;<a href="#" onclick="bulletScreenEngine.option.playSpeed = 2.5;">2.5倍数</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.option.scaling = 1;">1倍缩放</a>&nbsp;<a href="#" onclick="bulletScreenEngine.option.scaling = 1.5;">1.5倍缩放</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.option.scaling = 2;">2倍缩放</a>&nbsp;<a href="#" onclick="bulletScreenEngine.option.scaling = 0.75;">0.75倍缩放</a>&nbsp;<br>
    <a href="#" onclick="bulletScreenEngine.setOpacity(0.0);">100%透明</a>&nbsp;<a href="#" onclick="bulletScreenEngine.setOpacity(0.25);">75%透明</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.setOpacity(0.5);">50%透明</a>&nbsp;<a href="#" onclick="bulletScreenEngine.setOpacity(0.75);">25%透明</a>&nbsp;
    <a href="#" onclick="bulletScreenEngine.setOpacity(1.0);">不透明</a>&nbsp;
</body>

</html>